<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="top.jsp"%>

<!doctype html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>人物介绍</title>
		<link rel="stylesheet" href="css/ci.bootstrap.min.css">
		<link rel="stylesheet" href="css/ci.material-cards.css">
		<style type="text/css">
			html {
				position: relative;
				min-height: 100%;
			}

			body {
				background: url(imgs/loginbkg.jpg);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-color: pink;
				color: #37474F;
				font-family: 'Raleway', sans-serif;
				font-weight: 300;
				font-size: 16px;
				line-height: 100px;
			}

			h1,
			h2,
			h3 {
				font-weight: 200;
			}
		</style>
	</head>
	<body>
		<div class="htmleaf-container">
			<br>
			<section class="container">
				<div class="row active-with-click">
					<div class="col-md-4 col-sm-6 col-xs-12">
						<article class="material-card Pink">
							<h2>
								<span>Shigen</span>
								<strong>
									<i class="fa fa-fw fa-star"></i>
									项目主要负责人，项目组长
								</strong>
							</h2>
							<div class="mc-content">
								<div class="img-container">
									<img class="img-responsive" src="imgs/gen.jpg">
								</div>
								<div class="mc-description">
									在项目中主要负责需求分析、页面数据的来源、后端代码的编写、逻辑控制、提供页面数据、页面测试、项目总的进度安排等方面，使用myBatis、SQL、IDEA、HTML5、CSS3、JavaScript、jQuery AJAX等工具完成了前后端页面的交互，使项目更具完整性。在生活中，为人绅士有礼，乐于助人，健康乐观。
								</div>
							</div>
							<a class="mc-btn-action">
								<i class="fa fa-bars"></i>
							</a>
							<div class="mc-footer">
								兴趣爱好：编程，运动，写文章，做视频
							</div>
						</article>
					</div>
					<!--</div>-->
					<!--<div class="row active-with-hover">-->
					<div class="col-md-4 col-sm-6 col-xs-12">
						<article class="material-card Deep-Purple">
							<h2>
								<span>Cillian</span>
								<strong>
									<i class="fa fa-fw fa-star"></i>
									后端项目负责人
								</strong>
							</h2>
							<div class="mc-content">
								<div class="img-container">
									<img class="img-responsive" src="imgs/zzx.jpg">
								</div>
								<div class="mc-description">
									在项目中主要负责数据库设计、sql调优、接口的编写和测试等方面，使用了myBatis、SQL、IDEA等开发工具完成了数据的存储和增删改查功能及登录验证码的生成的工具类。在生活中，为人外向开朗，能说会道，待人待物有耐心，兴趣爱好广泛。
								</div>
							</div>
							<a class="mc-btn-action">
								<i class="fa fa-bars"></i>
							</a>
							<div class="mc-footer">
								兴趣爱好：跳舞、乐器
							</div>
						</article>
					</div>
					<div class="col-md-4 col-sm-6 col-xs-12">
						<article class="material-card Blue">
							<h2>
								<span>Ayu</span>
								<strong>
									<i class="fa fa-fw fa-star"></i>
									前端部分编辑
								</strong>
							</h2>
							<div class="mc-content">
								<div class="img-container">
									<img class="img-responsive" src="imgs/wjp.jpg">
								</div>
								<div class="mc-description">
									在项目中主要负责部分前端页面的编写，美化及布局设计，使用HTML5、CSS3、JavaScript、jQuery AJAX等开发工具进行前端页面的开发设计。在生活中，为人内向，与人相处友好，待人处事谦逊有礼。
								</div>
							</div>
							<a class="mc-btn-action">
								<i class="fa fa-bars"></i>
							</a>
							<div class="mc-footer">
								兴趣爱好：动漫，游戏，音乐
							</div>
						</article>
					</div>
				</div>
			</section>
		</div>
		<script src="js/ci.min.js" type="text/javascript"></script>
		<script src="js/ci.material-cards.min.js"></script>
		<script>
			$(function() {
				$('.material-card').materialCard({
					icon_close: 'fa-chevron-left',
					icon_open: 'fa-thumbs-o-up',
					icon_spin: 'fa-spin-fast',
					card_activator: 'click'
				});
				//        $('.active-with-click .material-card').materialCard();
				window.setTimeout(function() {
					$('.material-card:eq(1)').materialCard('open');
				}, 2000);
				$('.material-card').on('shown.material-card show.material-card hide.material-card hidden.material-card',
					function(event) {
						console.log(event.type, event.namespace, $(this));
					});
			});
		</script>

	</body>
</html>
